﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="single.aspx.cs" Inherits="YongHu_UI.single" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <title></title>
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <script src="Scripts/jquery-3.4.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />	
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Shopin Responsive web template, Bootstrap Web Templates, Flat Web Templates, AndroId Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--theme-style-->
<link href="css/style4.css" rel="stylesheet" type="text/css" media="all" />	
<!--//theme-style-->
<script src="js/jquery.min.js"></script>
<!--- start-rate---->
<script src="js/jstarbox.js"></script>
	<link rel="stylesheet" href="css/jstarbox.css" type="text/css" media="screen" charset="utf-8" />
		<script type="text/javascript">
            jQuery(function () {
                jQuery('.starbox').each(function () {
                    var starbox = jQuery(this);
                    starbox.starbox({
                        average: starbox.attr('data-start-value'),
                        changeable: starbox.hasClass('unchangeable') ? false : starbox.hasClass('clickonce') ? 'once' : true,
                        ghosting: starbox.hasClass('ghosting'),
                        autoUpdateAverage: starbox.hasClass('autoupdate'),
                        buttons: starbox.hasClass('smooth') ? false : starbox.attr('data-button-count') || 5,
                        stars: starbox.attr('data-star-count') || 5
                    }).bind('starbox-value-changed', function (event, value) {
                        if (starbox.hasClass('random')) {
                            var val = Math.random();
                            starbox.next().text(' ' + val);
                            return val;
                        }
                    })
                });
            });
        </script>
<!---//End-rate---->
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <!--header-->
<div class="header">
<div class="container">
		<div class="head">
			<div class=" logo">
				<a href="index.html"><img src="images/logo.png" alt=""></a>	
			</div>
		</div>
	</div>
	<div class="header-top">
		<div class="container">
		<div class="col-sm-5 col-md-offset-2  header-login">
					<ul >
						<li><a href="login.aspx">登录</a></li>
						<li><a href="register.aspx">注册</a></li>
						<li><a href="checkout.html"></a></li>
					</ul>
				</div>
				
			<div class="col-sm-5 header-social">		
					<ul >
						<li><a href="#"><i></i></a></li>
						<li><a href="#"><i class="ic1"></i></a></li>
						<li><a href="#"><i class="ic2"></i></a></li>
						<li><a href="#"><i class="ic3"></i></a></li>
						<li><a href="#"><i class="ic4"></i></a></li>
					</ul>
					
			</div>
				<div class="clearfix"> </div>
		</div>
		</div>
		
		<div class="container">
		
			<div class="head-top">
			
		 <div class="col-sm-8 col-md-offset-2 h_menu4">
				<nav class="navbar nav_bottom" role="navigation">
 
 <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header nav_2">
      <button type="button" class="navbar-toggle collapsed navbar-toggle1" data-toggle="collapse" data-target="#bs-megadropdown-tabs">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
     
   </div> 
   <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-megadropdown-tabs">
        <ul class="nav navbar-nav nav_1">
            <li><a class="color" href="index.aspx">首页</a></li>
			<li class="dropdown mega-dropdown active">
			    <a class="color2" href="product.aspx">服装</a>				
								
			</li>
        </ul>
     </div><!-- /.navbar-collapse -->

</nav>
			</div>
			<div class="col-sm-2 search-right">
				<ul class="heart">
				<li>
				<a href="wishlist.html" >
				<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
				</a></li>
				<li><a class="play-icon popup-with-zoom-anim" href="#small-dialog"><i class="glyphicon glyphicon-search"> </i></a></li>
					</ul>
					<div class="cart box_1">
						<a href="checkout.aspx">
						<h3> 
							<img src="images/cart.png" alt=""/></h3>
						</a>
						<p><a href="javascript:;" class="simpleCart_empty">购物车</a></p>

					</div>
					<div class="clearfix"> </div>
					
						<!----->

						<!---pop-up-box---->					  
			<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
			<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
			<!---//pop-up-box---->
			<div id="small-dialog" class="mfp-hide">
				<div class="search-top">
					<div class="login-search">
						<input type="submit" value="">
						<input type="text" value="Search.." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search..';}">		
					</div>
					<p>Shopin</p>
				</div>				
			</div>
		 <script>
             $(document).ready(function () {
                 $('.popup-with-zoom-anim').magnificPopup({
                     type: 'inline',
                     fixedContentPos: false,
                     fixedBgPos: true,
                     overflowY: 'auto',
                     closeBtnInside: true,
                     preloader: false,
                     midClick: true,
                     removalDelay: 300,
                     mainClass: 'my-mfp-zoom-in'
                 });

             });
         </script>		
						<!----->
			</div>
			<div class="clearfix"></div>
		</div>	
	</div>	
</div>
<div class="banner-top">
	<div class="container">
		<h1>服装详情</h1>
		<em></em>
		<h2><a href="index.html">首页</a><label>/</label>服装详情</a></h2>
	</div>
</div>

					<div class="single">
						<div class="container">
						<div class="col-md-9">
							<div class="col-md-5 grid">		
								<div class="flexslider">
									  <ul class="slides">
										<li data-thumb="<%=Avatar %>">
											<div class="thumb-image"> <img src="<%=Avatar %>" data-imagezoom="true" class="img-responsive"> </div>
										</li>
									  </ul>
								</div>
							</div>	
						<div class="col-md-7 single-top-in">
												<div class="span_2_of_a1 simpleCart_shelfItem">
										<h3>商品介绍</h3>
										<p class="in-para"><%=Summary %></p>
										<div class="price_single">
										  <span class="reducedfrom item_price">$<%=Money %></span>
										 <div class="clearfix"></div>
										</div>
										<h4 class="quick">快速概述</h4>
				
										<div class="wish-list">
				 							<ul>
				 								<li class="compare">
													 <%--<a onclick="GouWu(<%=Id %>)">添加购物车</a>--%>
													 <a onclick="GouWu(<%=Id %>)" href="#" >添加购物车</a>
				 								</li>
				 							</ul>
										 </div>
										 <div class="quantity"> 
								<div class="quantity-select">                           
									<div class="entry value-minus">&nbsp;</div>
									<div class="entry value" id="aaa"><span>1</span></div>
									<div class="entry value-plus active">&nbsp;</div>
									<a class="btn btn-danger" onclick="GouMai(<%=Id %>)" href="#">立即购买</a>
								</div>
							</div>
							<!--quantity-->
	<script>
        $('.value-plus').on('click', function () {
            var divUpd = $(this).parent().find('.value'), newVal = parseInt(divUpd.text(), 10) + 1;
            divUpd.text(newVal);
        });

        $('.value-minus').on('click', function () {
            var divUpd = $(this).parent().find('.value'), newVal = parseInt(divUpd.text(), 10) - 1;
            if (newVal >= 1) divUpd.text(newVal);
		});
		function GouWu(id) {
			var aa = document.getElementById("aaa").innerText;
			/*alert(aa);*/
            $.ajax({
                type: "post",
                url: "../yiban/GouWuChe.ashx?id=" + id +"&&number="+aa,
                dataType: "json",
                success: function (aa) {
                    if (aa.idd == 1) {
                        alert(aa.name)
                    } else {
                        alert("购物车添加失败");
                    }
                },
                error: function () {
                    window.location.href = aa.lu;
                }
            })
		}
        function GouMai(id) {
            var aa = document.getElementById("aaa").innerText;
            /*alert(aa);*/
			window.location.href = "contactDress.aspx?id=" + id + "&&number=" + aa;
        }
    </script>
								</div>
							</div>
<div class="col-md-3 product-bottom product-at">
				<!--initiate accordion-->
						<script type="text/javascript">
                            $(function () {
                                var menu_ul = $('.menu-drop > li > ul'),
                                    menu_a = $('.menu-drop > li > a');
                                menu_ul.hide();
                                menu_a.click(function (e) {
                                    e.preventDefault();
                                    if (!$(this).hasClass('active')) {
                                        menu_a.removeClass('active');
                                        menu_ul.filter(':visible').slideUp('normal');
                                        $(this).addClass('active').next().stop(true, true).slideDown('normal');
                                    } else {
                                        $(this).removeClass('active');
                                        $(this).next().stop(true, true).slideUp('normal');
                                    }
                                });

                            });
                        </script>
		</div>
		<div class="clearfix"> </div>
	</div>
	<div class="col-md-3 product-bottom product-at">
			
		</div>
			<!--brand-->
		<div class="container">
			
			</div>
			<!--//brand-->
			</div>
			
	<div class="footer-middle">
				<div class="container">
					<div class="col-md-6 footer-middle-in">
						<a href="index.html"><img src="images/log.png" alt=""></a>
						<p>服装，是衣服鞋装饰品等的总称，多指衣服。在国家标准中对服装的定义为：缝制，穿于人体起保护和装饰作用的产品，又称衣服。
对社会来说，服装已经是遮体、装饰的生活必需品，不仅仅为穿，还是一个身份、一种生活态度、一个展示个人魅力的表现。</p>
					</div>
					
					<div class="col-md-6 footer-middle-in">
						<h6>信息</h6>
						<ul class=" in">
							<li><a href="login.aspx">登录</a></li>
							<li><a href="checkout.aspx">购物车</a></li>
							<li><a href="product.aspx">服装</a></li>
							<li><a data-toggle="modal" data-target=".bs-example-modal-lg1">地图</a></li>
						</ul>
						<div class="clearfix"></div>
					</div>
					<div class="modal fade bs-example-modal-lg1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
		  <div class="modal-dialog modal-lg">
		    <div class="modal-content">
		     <div id="con" style="width:1000px;height:600px;"></div>
		    </div>
		  </div>
		</div>
			</div>
		</div>
<script src="js/imagezoom.js"></script>

	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script defer src="js/jquery.flexslider.js"></script>
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />

<script>
    // Can also be used with $(document).ready()
    $(window).load(function () {
        $('.flexslider').flexslider({
            animation: "slide",
            controlNav: "thumbnails"
        });
    });
</script>

	<script src="js/simpleCart.min.js"> </script>
<!-- slide -->
<script src="js/bootstrap.min.js"></script>


        </div>
    </form>
</body>
	<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=5yfkZfiryt58x1ZLaZiXM0HjAjqYd1f5"></script>
					<script>
                        var map = new BMapGL.Map("con");
                        var point = new BMapGL.Point(116.404, 39.915);
                        map.centerAndZoom(point, 15);
                        map.enableScrollWheelZoom(true);

                        //创建地址解析器实例
                        var myGeo = new BMapGL.Geocoder();
                        // 将地址解析结果显示在地图上，并调整地图视野
                        myGeo.getPoint('偃师市中城百货', function (point) {
                            if (point) {
                                map.centerAndZoom(point, 16);
                                map.addOverlay(new BMapGL.Marker(point))
                            }
                        }, '河南省')       // 打开信息窗口  map.getCenter()地图的中心
                    </script>
</html>

